<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>权限管理 - 权限编辑</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!-- ace settings handler -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/zTreeStyle.css" type="text/css">
		<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<!-- validator scripts -->
		<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
		<!-- user scripts -->
		<script src="${rc.contextPath}/assets/js/user/base.js"></script>
		
		<link rel="stylesheet" type="text/css" href="${rc.contextPath}/assets/third/jquery-easyui-1.5/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/assets/third/jquery-easyui-1.5/themes/icon.css">
	<!-- <script type="text/javascript" src="${rc.contextPath}/assets/third/jquery-easyui-1.5/jquery.min.js"></script> -->
	<script type="text/javascript" src="${rc.contextPath}/assets/third/jquery-easyui-1.5/jquery.easyui.min.js"></script>
	</head>

	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
			<!-- <div class="page-header">
				<h1>
					统计code管理
					<small>
						<i class="ace-icon fa fa-angle-double-right"></i>
						<#if statisticCode?? && statisticCode.id??>
						编辑code码
						<#else>
						新增code码
						</#if>
					</small>
				</h1>
			</div> -->
			<div class="row">
				<div class="col-xs-12">
					<div class="col-xs-3  col-xs-offset-1">
						<form id="platformForm" class="form-horizontal" role="form" action="">
								<div id="statisticCode">
									<input type="hidden" id="node" value="">
									<div class="form-group">
										<div class="widget-box widget-color-blue2">
											<div class="widget-header">
												<h4 class="widget-title lighter smaller">code码级联关系</h4>
												<button id="cancelBtn" class="btn btn-xs btn-primary" style="float:right;margin-top:4px;margin-right:4px;" type="button" onclick="javascript:history.go(-1);">
													<i class="ace-icon fa fa-undo align-top bigger-125"></i>
													返回
												</button>
												<button class="btn btn-xs btn-primary" style="float:right;margin-top:4px;margin-right:4px;" type="button" id="newCode"><i class="ace-icon fa fa-pencil-square-o align-top bigger-125"></i>新增</button>
											</div>
						
											<div class="widget-body">
												<div id="tree" class="widget-main padding-8">
													<ul id="tree1" style="height:600px;"></ul>
												</div>
											</div>
										</div>
									</div>
								</div>
								<button class="btn btn-info" data-toggle="modal" type="button" style="display:none;" id="add"
									   data-target="#myModal" <#if statisticCode?? && statisticCode.id??>disabled='true' readOnly='true'</#if>>
								</button>
								<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
								   aria-labelledby="myModalLabel" aria-hidden="true">
								   <div class="modal-dialog">
								      <div class="modal-content">
								         <div class="modal-header">
								            <button type="button" class="close" 
								               data-dismiss="modal" aria-hidden="true">
								                  &times;
								            </button>
								            <h4 class="modal-title" id="myModalLabel">
								               	新增code
								            </h4>
								         </div>
							         <div class="modal-body">
										<input type="hidden" id="id" name="id" value="${statisticCode.id}">
										<input type="hidden" id="parentCode" name="parentCode" value="${statisticCode.code}">
										<div class="form-group">
											<label class="col-sm-4 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>父级code码 </label>
											<div class="col-sm-8">
												<input type="hidden" id="parent" name="parent" value="${statisticCode.parent.id!}">
												<input type="text" id="parentText" name="parentText" placeholder="请选择父级code码" value="${statisticCode.parent!}" class="col-xs-12 col-sm-6" <#if statisticCode?? && statisticCode.id??>disabled='true' readOnly='true'</#if>>
											</div>
										</div>
										<div class="space-4"></div>
										<div class="form-group">
											<label class="col-sm-4 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>中文名称 </label>
											<div class="col-sm-8">
												<input type="text" id="name" name="name" placeholder="请输入名称" value="${statisticCode.name!}" class="col-xs-12 col-sm-6" >
											</div>
										</div>
										<div class="space-4"></div>
										<div class="form-group">
											<label class="col-sm-4 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>名称拼音 </label>
											<div class="col-sm-8">
												<input type="text" id="enName" name="enName" placeholder="请输入名称拼音" value="${statisticCode.enName!}" class="col-xs-12 col-sm-6" >
											</div>
										</div>
										 <div class="form-group select-page" style="display: none">
											 <label class="col-sm-4 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>请选择 </label>
											 <div class="col-sm-3">
												 <select class="form-control" id="select_page">
												 </select>
											 </div>
										 </div>
										 <div class="form-group pit-name" style="display: none">
											 <label class="col-sm-4 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>坑位 </label>
											 <div class="col-sm-8">
												 <input type="text" id="pit_name" name="pit_name" placeholder="A01" value="${statisticCode.name!}" class="col-xs-12 col-sm-6" >
												 <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="left" data-content="More details." title="Popover on hover" onclick="showimage('${rc.contextPath}/assets/images/pit.png')">?</span>
											 </div>
										 </div>
										<div class="space-4"></div>
										<div class="form-group">
											<label class="col-sm-4 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>code码 </label>
											<div class="col-sm-8">
												<input type="text" id="code" name="code"  value="${statisticCode.code!}" class="col-xs-6 col-sm-3"  >
												<button class="btn btn-info col-xs-6 col-sm-3" type="button" id="createCode">生成code码
												</button>
												<input type="hidden" id="codeType" name="codeType" value="" >
												<input type="hidden" id="codeTypeLevel" name="codeTypeLevel" value="" >
											</div>
										</div>
										<div class="space-4"></div>
										<div class="form-group">
											<label class="col-sm-4 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>添加子级 </label>
											<div class="col-sm-2">
												<select class="form-control" name="isAdd" id="isAdd" <#if statisticCode?? && statisticCode.id??>disabled='true' readOnly='true'</#if>>
													<option value="1">允许</option>
													<option value="0">不允许</option>
												</select>
											</div>
										</div>

							         </div>
							         <div class="modal-footer">
							            <button type="button" class="btn btn-default"
							               data-dismiss="modal">关闭
							            </button>
							            <button id="save" type="button" class="btn btn-primary">
							              	 提交
							            </button>
							         </div>
							      </div><!-- /.modal-content -->
								</div><!-- /.modal -->
							</div>
						</form>
					</div>
					<div class="col-xs-6">
						<table id="tg"></table>
					</div>
				</div><!-- /.col -->
				<div id="ShowImage_Form" class="modal">
					<div class="modal-header">
						<button data-dismiss="modal" class="close" type="button"></button>
					</div>
					<div class="modal-body">
						<div id="img_show">
						</div>
					</div>
				</div>
			</div><!-- /.row -->
			
		</div>


		<script type="text/javascript" src="${rc.contextPath}/assets/js/jquery.ztree.all.min.js"></script>
		<!-- inline scripts related to this page -->
		<script type="text/javascript">
		var message = "${message}";
		if(!isEmpty(message)) {
			showMsg(message);
		}
		
		function treegridFunction(node_html){
			$('#tg').treegrid({
				url:'${rc.contextPath}/statisticCode/treegrid?parentName='+node_html,  
			    title:'code信息',
			    idField:'id',    
			    treeField:'name',    
			    rownumbers:'true',
			    fitColumns: true,
			    width:'800px',
			    height:'650px',
			    columns:[[    
					{field:'id',title:'id',width:40},
			        {field:'name',title:'中文名称',width:240,editor:'text'},    
			        {field:'enName',title:'名称拼音',width:160,editor:'text',align:'center'}, 
			        {field:'parent',title:'父级名称',width:160,align:'center'}, 
			        {field:'code',title:'code码',width:100,editor:'text',align:'center'},
			        {field:'isAdd',title:'添加子级',width:100,align:'center'},
			        {field:'codeType',title:'code码类型',width:100,align:'center'},    
			        {field:'codeTypeLevel',title:'类型级别',width:100,align:'center'},
			        {field:'action',title:'操作',width:80,align:'center',
						formatter:function(value,row,index){
							if (row.editing){
								var flag=0;
								if(row.name==""){
									flag=0;
								}else{
									flag=1;
								}
								var s = '<a href="#" onclick="saverow('+row.id+');">保存</a> ';
								var c = '<a href="#" onclick="cancelrow('+row.id+','+flag+');">取消</a>';
								return s+c;
							} else {
								var e = '<a href="#" onclick="editrow('+row.id+');">编辑</a> ';
								return e;
							}
						}
					}
			    ]],
				onBeforeEdit:function(row){
					row.editing = true;
					updateActions(row);
				},
				onAfterEdit:function(row){
					if(row.name=="" || row.enName==""){
						alert("请输入相应的内容");
						$('#tg').treegrid('beginEdit', row.id);
					}else{
						row.editing = false;
						updateActions(row);
					}
					
				},
				onCancelEdit:function(row){
					if(row.name=="" || row.enName==""){
						$('#tg').datagrid('deleteRow', row.id);
					}else{
						row.editing = false;
						updateActions(row);
					}
					
				}    
			});
			$('#tg').treegrid('hideColumn','id');
			var rows = $('#tg').treegrid('getRoots');
			for(var index in rows){
				$('#tg').treegrid('collapseAll', index.id);
			}
		}
		
		function updateActions(row){
			$('#tg').treegrid('update',{
				id: row.id,
				row:{}
			});
		}
		
		//编辑节点
		function editrow(id){
			$.ajax({
				url : '${rc.contextPath}/statisticCode/getUserMenu',
				type : "POST",
				data : {
				},
				success:function(data) {
					if(data.code == 1) {
						var isHasGetParent=$('#tg').treegrid('getParent',id);//获得父节点
						var isHasGetChildren=$('#tg').treegrid('getChildren',id);//获得父节点
						if(isHasGetParent==null && isHasGetChildren==""){
							$('#tg').treegrid('beginEdit', id);
						}else if(isHasGetParent!=null){
							$('#tg').treegrid('beginEdit', id);
						}else{
							$('#tg').treegrid('beginEdit', id);
							var editors = $('#tg').treegrid('getEditors', id);
							var feditor1 = editors[2];
							var feditor2 = editors[3];
							$(feditor1.target).attr('disabled','disabled');
							$(feditor2.target).attr('disabled','disabled');
//							feditor.target.prop('readonly',true);//设置为只读
						}
					} else {
						if(data.msg == undefined){
							showMsg("权限不足！");
						}
					}
				},
				error:function(data) {
				}
			});
			
		}
		
		//保存节点
		function saverow(id){
			$('#tg').datagrid('endEdit', id);
			var data=$('#tg').treegrid('find', id);
			data.children=[];
			var str = JSON.stringify(data);
			$.ajax({
				url : '${rc.contextPath}/statisticCode/saveCode',
				type : "POST",
				data : {
					codeInfo:str
				},
				success:function(data) {
					if(data.code == 1) {
						$('#tree1').remove();
						$('#tree').html('<ul id="tree1" style="height:600px;"></ul>');
						treegridFunction($("#node").val());
						var treeData = data.statisticCodes;
						var sampleData = initiateDemoData(treeData);
						createTreeview(sampleData);
					} else {
					}
				},
				error:function(data) {
				}
			});
		}	
		
		
		function cancelrow(id,flag){
			if(flag==0){
				$('#tg').datagrid('deleteRow', id);
			}else{
				$('#tg').datagrid('cancelEdit', id);
			}
		}
		
		
			$(document).ready(function(event) {
				treegridFunction("all");
				$(document).click(function (e){
					var node_class = $(e.target).attr('class'); 
					if(node_class == 'node_name'){
						var node_html = $(e.target).html();
						$("#node").val(node_html);
						treegridFunction(node_html);
					}
				});
				$("#newCode").click(function(){
					$("#id").val("");
					$("#parent").val("");
					$("#name").val("");
					$("#enName").val("");
					$("#code").val("");
					$("#codeType").val("");
					$("#codeTypeLevel").val("");
					var text = $("#node").val();
					if(text==""){
						showMsg("请选择节点!");
					}else {
						$.ajax({
							url : '${rc.contextPath}/statisticCode/getParent',
							type : "POST",
							data : {
								nodeHtml:text
							},
							success:function(data) {
								if(data.code == 1) {
									statisticCodeData=data.msg;
									if(statisticCodeData.code == "4"){
										$(".select-page").show();
										$(".pit-name").show();
									}else{
										$(".select-page").hide();
										$(".pit-name").hide();
									}
									$("#add").click();
									$("#parentText").attr("readonly","readonly");
									$("#parentText").val(statisticCodeData.name);
									$("#parent").val(statisticCodeData.id);
									$("#parentCode").val(statisticCodeData.code);
									//选择页面
									var html = "";
                                    $.each(statisticCodeData.pageList,function(index,value){
                                        html +="<option value='"+value+"'>"+value+"</option>";
                                    });
                            		$('#select_page').html(html);
								} else {
									if(data.msg == undefined){
										showMsg("权限不足！");
									}else{
										showMsg(data.msg);
									}
								}
							},
							error:function(data) {
							}
						});
					}
				});
				
				$("#createCode").click(function(){
					var parentCode = $("#parentCode").val();
					var url;
					var param;
					if(parentCode == "4"){
						url = '${rc.contextPath}/statisticCode/createPitCode';
						param = {"page":$("#select_page").val(),"pitName":$("#pit_name").val()}
					}else{
						url = '${rc.contextPath}/statisticCode/createCode';
						param = {parentCode : parentCode};
					}
					$.ajax({
						url : url,
						type : "POST",
						data : param,
						success:function(data) {
							if(data.code == 1) {
								$("#code").val(data.msg);
								$("#codeType").val(data.codeType);
								$("#codeTypeLevel").val(data.codeTypeLevel);
							}else{
								showMsg(data.errorMsg);
							}
						},
						error:function(data) {
						}
					}); 
				});
				
				
				$("#save").click(function(){
					var id = $("#id").val();
					var parentId = $("#parent").val();
					var name = $("#name").val();
					var enName = $("#enName").val();
					var code = $("#code").val();
					var isAdd = $("#isAdd").val();
					var codeType = $("#codeType").val();
					var codeTypeLevel = $("#codeTypeLevel").val();
					if(isEmpty(name)) {
						$("#name").focus();
						showMsg("中文名称不能为空！");
					} else if(isEmpty(enName)){
						$("#enName").focus();
						showMsg("名称拼音不能为空！");
					} else if(isEmpty(code)){
						$("#code").focus();
						showMsg("code码不能为空！");
					} else{
						$('#myModal').modal('hide');
						$.ajax({
							url : '${rc.contextPath}/statisticCode/save',
							type : "POST",
							data : {
								id : id,
								parentId : parentId,
								name : name,
								enName : enName,
								code : code,
								isAdd : isAdd,
								codeType : codeType,
								codeTypeLevel : codeTypeLevel,
								isNew : true
							},
							success:function(data) {
								if(data.code == 1) {
									window.location.href = "${rc.contextPath}/statisticCode/new?message="+data.msg;
								}
							},
							error:function(data) {
							}
						});
					}
				});
			})
		</script>
		
		<script src="${rc.contextPath}/assets/js/fuelux.tree.min.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			function initiateDemoData(data){
				var tree_data=eval(data);
		
				var dataSource1 = function(options, callback){
					var $data = null
					if(!("name" in options) && !("type" in options)){
						$data = tree_data[0];
						callback({ data: $data });
						return;
					}
					else if("name" in options && options.type == "folder") {
						if("children" in options)
							$data = options.children[0] || {};
						else $data = {}
					}
					
					if($data != null)
						setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200);
				}
				return {'dataSource1': dataSource1}
			}
			function createTreeview(sampleData){
				$('#tree1').ace_tree({
					dataSource: sampleData['dataSource1'],
					multiSelect: false,
					cacheItems: true,
					'open-icon' : 'ace-icon tree-minus',
					'close-icon' : 'ace-icon tree-plus',
					'selectable' : true,
					'selected-icon' : 'ace-icon fa fa-check',
					'unselected-icon' : 'ace-icon fa fa-times',
					loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
				});
				$(".icon-item").hide();
			}
			
			jQuery(function($){
				var data = '${treeview!}';
				var sampleData = initiateDemoData(data);
				createTreeview(sampleData);
				
				$(document).click(function (e){
					var treeview_class = $(e.target).attr('class');
					if(treeview_class == 'tree-branch-header' || treeview_class == 'tree-item tree-selected'){
						var treeview_html = $(e.target).find("span:last").html();
						$("#tree1").find("*").css("background","");
						$(e.target).css("background","#B0E0E6");
						$("#node").val(treeview_html);
						treegridFunction(treeview_html);
					}else if(treeview_class == 'tree-label'){
						var treeview_html = $(e.target).html();
						$("#tree1").find("*").css("background","");
						$(e.target).css("background","#B0E0E6");
						$("#node").val(treeview_html);
						treegridFunction(treeview_html);
					}
					
				});
			});

			function showimage(source){
				$("#ShowImage_Form").find("#img_show").html("<image src='"+source+"' class='carousel-inner img-responsive img-rounded' />");
				$("#ShowImage_Form").modal();
			}

			$("#ShowImage_Form").click(function(){
				$("#ShowImage_Form").modal('hide');
			})
		</script>
	</body>
</html>